<template>
  <div class="paddn">
    <div v-show="!flag">
      <div v-for="item in 10" :key="item">
        <a-skeleton avatar :paragraph="{ rows: 1 }" />
        <div  class="example">
          <a-spin />
        </div>
      </div>

    </div>
    <div v-show="flag">
      <video_main v-for="(item,index) in result" :key="index" :video="item"></video_main>
    </div>

    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">
      <van-cell v-for="(item,index) in list" :key="index" >
        <video_main  :video="item"></video_main>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
  import video_main from "../components/video_main";
  import  axios from "axios";

export default {
  name: "Video",
  components:{
    video_main,
  },
  data(){
    return {
      list:[],
      result:[],
      loading: false,
      finished: false,
      flag:false,
    }
  },
  methods:{
    onLoad() {
          axios.get('https://api.apiopen.top/api/getHaoKanVideo?page=0&size=10').then(res=>{
            for (let i = 0; i < 10; i++) {
              this.result.push(res.data.result.list[i]);
            }
            // 加载状态结束
            this.loading = false;
            // 数据全部加载完成
            if (this.result.length >= 1000) {
              this.finished = true;
            }
          })
    },
  },
  created() {
    axios.get('https://api.apiopen.top/api/getHaoKanVideo?page=0&size=10').then(res=>{
        this.flag=true
        this.result=res.data.result.list
    }),
    sessionStorage.removeItem('value')
  },
  mounted() {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
  }
}
</script>

<style scoped>
.paddn{
  padding-bottom: 60px;
}
/deep/h4{
  font-weight: 700;
}
.example {
  text-align: center;
  line-height: 250px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
  height: 240px;
}
</style>